<template>
  <div>
    <dtDialog
      title="菜单按钮管理"
      :visible.sync="dialogVisible"
      :footer-slot="true"
      class="button-dialog"
      @closeDialog="handleClose"
    >
      <div slot="content">
        <el-form ref="filterFormRef" label-width="100px" :inline="true">
          <el-form-item label="按钮名称" prop="buttonName">
            <el-input v-model="searchForm.buttonName" placeholder="请输入按钮名称" @keyup.enter.native="onSearch" />
          </el-form-item>
          <el-form-item label="按钮编码" prop="buttonCode">
            <el-input v-model="searchForm.buttonCode" placeholder="请输入按钮编码" @keyup.enter.native="onSearch" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
        <el-col>
          <el-button class="btn" type="primary" icon="el-icon-circle-plus-outline"
                     @click="addDefalutMenu">一键添加默认按钮</el-button>
          <el-button class="btn" icon="el-icon-plus" @click="onAdd">新增</el-button>
          <el-button class="btn" icon="el-icon-delete" @click="handleBatchDelete">删除</el-button>
        </el-col>
        <el-table
          ref="table"
          v-loading="loading"
          :row-key="getRowKey"
          :data="dataTable"
          height="300"
          @selection-change="handleSelectChange"
        >
          <el-table-column
            type="selection"
            align="center"
            :reserve-selection="true"
          />
          <el-table-column
            type="index"
            min-width="30"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="按钮名称"
            prop="buttonName"
            min-width="120"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="按钮编码"
            prop="buttonCode"
            min-width="120"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="操作"
            align="center"
            min-width="80"
          >
            <!-- <template scope="scope"> -->
            <template slot-scope="scope">
              <el-button type="text" @click="onEdit(scope.row)">修改</el-button>
              <el-divider direction="vertical" />
              <!-- <el-popconfirm
                title="确定要删除菜单按钮吗？"
                @confirm="onDelete(scope.row)"
              > -->
              <el-button slot="reference" type="text" @click="onDelete(scope.row)">删除</el-button>
              <!-- </el-popconfirm> -->
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <dt-pagination
            v-show="totalRows > 0"
            :total="totalRows"
            :page.sync="page.pageNo"
            :limit.sync="page.pageSize"
            @pagination="onSearch"
          />
        </span>
      </div>
    </dtDialog>
    <MenuButtonModal ref="menuButtonModal" @added="onAdded" @edited="onEdited" />
  </div>
</template>

<script>
import MenuButtonModal from './MenuButtonModal'
import { getSysMenuButton, deleteSysMenuButton, addSysDefaultMenuButton, batchDeleteMenuButton } from '@/framework/api/menu'

export default {
  name: 'MenuButtonDialog',
  components: {
    MenuButtonModal
  },
  data() {
    return {
      loading: false,
      menu: {},
      dialogVisible: false,
      searchForm: {
        buttonName: '',
        buttonCode: ''
      },
      page: {
        pageNo: 1,
        pageSize: 10
      },
      totalRows: 0,
      dataTable: [],
      batchIds: []
    }
  },
  methods: {
    init(record) {
      this.menu = { ...record }
      this.onSearch()
    },
    onAdd() {
      this.$refs.menuButtonModal.action = 'add'
      this.$refs.menuButtonModal.add(this.menu)
    },
    onEdit(record) {
      this.$refs.menuButtonModal.action = 'edit'
      this.$refs.menuButtonModal.edit(this.menu, record)
    },
    onDelete(record) {
      this.$dtMessageBox({ title: '提示', message: `确认删除“${record.buttonName}”按钮吗？`, type: 'warning' }).then(() => {
        const params = {
          buttonId: record.buttonId
        }
        deleteSysMenuButton(params).then((resp) => {
        // 提示消息
          this.$dtMessage({
            type: resp.success ? 'success' : 'error',
            message: `${resp.message}`
          })
          if (resp.success) {
            this.onSearch()
          }
        })
      })
    },
    onSearch() {
      const { menuId } = this.menu
      const searchFrom = { menuId, ...this.searchForm }
      const params = Object.assign(searchFrom, this.page)
      this.loading = true
      getSysMenuButton(params).then((resp) => {
        const { pageNo, pageSize, rows, totalRows } = resp.data
        this.page = { pageNo, pageSize }
        this.totalRows = totalRows
        if (resp.success) {
          this.$nextTick(() => {
            this.dataTable = [...rows]
          })
        } else {
          this.$dtMessage({
            type: 'error',
            message: `出错了：+ ${resp.message}`
          })
        }
        this.loading = false
      })
      this.$refs.table.clearSelection()
    },
    onReset() {
      this.searchForm = {
        buttonName: '',
        buttonCode: ''
      }
      this.onSearch()
    },
    handleCurrentChange(currentPage) {
      this.page.pageNo = currentPage
      this.onSearch()
    },
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.onSearch()
    },
    onAdded() {
      this.onSearch()
    },
    onEdited() {
      this.onSearch()
    },
    addDefalutMenu() {
      this.$confirm('是否一键添加系统默认CRUD操作按钮?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          menuId: this.menu.menuId
        }
        addSysDefaultMenuButton(params).then((resp) => {
          if (resp.success) {
            this.$dtMessage({
              type: 'success',
              message: '新增成功!'
            })
          }
          this.onSearch()
        })
      }).catch(() => {
        this.$dtMessage({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleSelectChange(selection) {
      const batchIds = []
      for (const item of selection) {
        const { buttonId } = item
        batchIds.push(buttonId)
      }
      this.batchIds = [...batchIds]
    },
    handleBatchDelete() {
      if (this.batchIds.length === 0) {
        this.$dtMessage({
          type: 'warning',
          message: '至少选中一条数据'
        })
        return false
      }
      this.$confirm('是否批量删除按钮?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        /* if (this.batchIds.length === 0) {
          this.$message.warning('至少选中一条数据')
        } else { */
        const params = {
          buttonIds: this.batchIds
        }
        batchDeleteMenuButton(params).then((resp) => {
          if (resp.success) {
            this.onSearch()
          }
          this.$dtMessage({
            type: resp.success ? 'success' : 'error',
            message: `${resp.message}`
          })
        })
        //      }
      }).catch(() => {
        this.$dtMessage({
          type: 'info',
          message: '已取消'
        })
      })
    },
    getRowKey(row) {
      return row.buttonId
    },
    handleClose() {
      this.searchForm.buttonName = ''
      this.searchForm.buttonCode = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.btn{
  margin-bottom: 8px;
}
  // .button-dialog .el-dialog__body {
  //   padding-top: 0px;
  //   max-height: 500px;
  //   overflow-y: auto;
  // }
  // .button-dialog .el-dialog {
  //   margin-top: 5vh !important;
  // }
</style>
